<template>
  <div class="tmpshare">
    <span class="tmpshare-weixin"  >
      <svg class="icon weixinbutton" aria-hidden="true" @click.capture="shareWeixin">
        <use xlink:href="#icon-weixin"></use>
      </svg>
      <div class="qcodeweixin" ref="qcodeweixin">
        <span>
          <p class="kaiti" style="text-align: center;">微信扫一扫</p>
          <img :src="imgurl">
        </span>
      </div>
    </span>
    <svg class="icon" aria-hidden="true" @click="shareQQ">
      <use xlink:href="#icon-QQ"></use>
    </svg>
    <svg class="icon" aria-hidden="true" @click="shareQQZ">
      <use xlink:href="#icon-QQkongjian"></use>
    </svg>
    <svg class="icon" aria-hidden="true" @click="shareWeibo">
      <use xlink:href="#icon-weibo"></use>
    </svg>
    <svg class="icon" aria-hidden="true" @click="shareDouban">
      <use xlink:href="#icon-douban"></use>
    </svg>
    <svg class="icon" aria-hidden="true" @click="shareLianjie">
      <use xlink:href="#icon-lianjie"></use>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { useNotification } from "naive-ui"
import QRcode from "qrcode"
const notification = useNotification()
const props = defineProps({
  detail:{
    type:Object,
    default:{}
  }
})
const qcodeweixin = ref()
const QRCode = ref(null)
const imgurl = ref('')
const shareURL = ref('')
const vshareConfig = reactive({
  shareList:['mshare','qzone'],
  common:[],
  share:[],
  slide:[],
  selectShare:[]
})
if(process.client){
  shareURL.value = window.location.href
}
const  getQRcode =async () => {
  await QRcode.toDataURL(shareURL.value).then(res => {
    imgurl.value = res
  })
}
const shareQQ = ()=>{
  let param = {
    url:shareURL.value,
    title:props.detail.title,
    desc:props.detail.doc,
    summary:props.detail.doc,
    site:shareURL.value
  }
  let s = []
  for(let key in param){
    s.push(key + '=' + encodeURIComponent(param[key] || ''))
  }
  let targetUrl = "http://connect.qq.com/widget/shareqq/index.html?" + s.join('&')
  window.open(targetUrl,'qq',"_black")
}
const shareQQZ = ()=>{
  let param = {
    url:window.location.href,
    title:props.detail.title,
    desc:props.detail.doc,
    summary:props.detail.doc,
    site:shareURL.value
  }
  let s = []
  for(let key in param){
    s.push(key + '=' + param[key])
  }
  let targetUrl = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?" +  s.join('&')
  window.open(targetUrl,"_black")
}
const shareWeibo = ()=>{
  let param = {
    url:window.location.href,
    title:props.detail.title
  }
  let s = []
  for(let key in param){
    s.push(key + '=' + param[key])
  }
  let targetUrl = "http://service.weibo.com/share/share.php?" +  s.join('&')
  window.open(targetUrl,"_black")
}
const shareDouban = ()=>{
  let param = {
    href:window.location.href,
    name:props.detail.title,
    text:props.detail.doc
  }
  let s = []
  for(let key in param){
    s.push(key + '=' + param[key])
  }
  let targetUrl = "http://shuo.douban.com/!service/share?" +  s.join('&')
  window.open(targetUrl,"_black")
}
const shareWeixin = () =>{
  if(qcodeweixin.value){
    qcodeweixin.value.style.display = "block"
  }
}
const shareLianjie = ()=>{
  var input = document.createElement('input') // 创建input标签
  input.value = window.location.href; // 将input的值设置为需要复制的内容
  document.body.appendChild(input) // 添加input标签
  input.select()  // 选中input标签
  document.execCommand('copy') // 执行复制
  notification['success']({
    content: '通知',
    meta: '复制链接成功',
    duration: 2500,
    keepAliveOnHover: true
  })
  document.body.removeChild(input) // 移除input标签
}
onMounted(()=>{
  getQRcode()
  document.addEventListener('click',(e) => {
    if(e.target.className != 'qcodeweixin' && e.target.className.baseVal != 'icon weixinbutton'){
      if(qcodeweixin.value){
        qcodeweixin.value.style.display = "none"
      }
    }
  })
})
</script>

<style scoped lang="scss">
.tmpshare{
  display: flex;
  justify-content: center;
  align-items: center;
  &-weixin{
    display: inline-block;
    position: relative;
  }
  .icon{
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin-right: 40px;
    display: block;
    margin-bottom: 20px;
  }
  .qcodeweixin{
    background-color: #fff;
    position: absolute;
    top: -149px;
    left: -43px;
    padding: 10px;
    border-radius: 4px;
    display: none;
    box-shadow:
      0 1px 1px hsl(0deg 0% 0% / 0.075),
      0 2px 2px hsl(0deg 0% 0% / 0.075),
      0 4px 4px hsl(0deg 0% 0% / 0.075),
      0 8px 8px hsl(0deg 0% 0% / 0.075),
      0 16px 16px hsl(0deg 0% 0% / 0.075)
    ;
    transition: all 1s;
    p{
      font-size: 14px;
    }
    img{
      width: 100px;
      height: 100px;
    }
  }
}
</style>